<!-- 任务执行情况 -->
<template>
  <el-dialog :title="titleline" :visible.sync="dialogVisible" @close="$emit('update:visible',false)"
             :close-on-click-modal="false">
    <div>
      <div class="search-list-table">
        <span class="seacherlist-title">时间段：</span>
        <el-date-picker
            v-model="addtime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small">
        </el-date-picker>
<!--        <el-input v-model="name" :placeholder="rankingType==1?'书名':'借阅人'" size="small"-->
<!--                  class="w-140 mr-10" v-if="rankingType==2"></el-input>-->
        <el-button type="primary" size="small" @click="search()"><i class="el-icon-search"></i>搜索</el-button>
        <downexcel :type="ranking" :option="{start_time: fromDatabook.start_time, end_time: fromDatabook.end_time}"></downexcel>
      </div>
      <el-table
          ref="multipleTable"
          :data="arryList"
          tooltip-effect="dark"
          header-cell-class-name="table-text-c"
          height="400"
          cell-class-name="table-text-c">
        <el-table-column
            :label="rankingType==1?'书名':'职工姓名'"
            align="center">
          <template slot-scope="scope">
            <span v-if="rankingType == 1">
              {{ scope.row.book ? scope.row.book.name : '' }}
            </span>
            <span v-else>
              {{ scope.row.user ? scope.row.user.realname : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="id"
            label="借阅数量">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="foodCheck()" size="small">确 定</el-button>
    </div>
  </el-dialog>

</template>
<script>
import {pagination} from '@/utils/util.js'

export default {
  name: 'taskListDialog',
  props: ['visible', 'rankingType'],
  components: {
  },
  data () {
    return {
      dialogVisible: this.visible,
      arryList: [],
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      name: '',
      titleline: '',
      fromDatabook: {
        start_time: '', // 开始时间
        end_time: '', // 结束时间
        p: 1,
        name: ''
      },
      fromDatauser: {
        start_time: '', // 开始时间
        end_time: '', // 结束时间
        p: 1,
        realname: ''
      },
      addtime: [],
      ranking:''
    }
  },
  created () {
  },
  methods: {
    InitFn () {
      // 书藉借阅排行榜
      let http_ = this.api.book.bookRank
      if (Number(this.rankingType) === 2) {
        // 人员借阅排行榜
        http_ = this.api.book.userRank
        this.fromDatauser.realname = this.name
        this.fromDatauser.p = this.page.pageindex
      } else {
        this.fromDatabook.name = this.name
        this.fromDatabook.p = this.page.pageindex
      }
      this.$fetch(http_, Number(this.rankingType) === 2 ? this.fromDatauser : this.fromDatabook).then((response) => {
        this.arryList = response.list.data
        this.page.total = response.list.total
      }).catch((err) => {
        console.log(err)
      })
    },
    foodCheck () {

    },
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索
    search () {
      this.page.pageindex = 1
      if (Number(this.rankingType) === 2) {
        this.fromDatauser.start_time = this.addtime ? this.addtime[0] : ''
        this.fromDatauser.end_time = this.addtime ? this.addtime[1] : ''
      } else {
        this.fromDatabook.start_time = this.addtime ? this.addtime[0] : ''
        this.fromDatabook.end_time = this.addtime ? this.addtime[1] : ''
      }
      this.InitFn()
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (Number(this.rankingType) === 1) {
          this.titleline = '书籍借阅排行榜'
          this.ranking = 'rankingBook'
        } else {
          this.titleline = '人员借阅排行榜'
          this.ranking = 'rankingUser'
        }
        this.InitFn()
      } else {
        this.page.pageindex = 1
      }
    }
  },
  mounted () {

  }
}
</script>
